<template>
    <div class="set-password">
        <Poptip transfer trigger="focus" placement="right" width="250">
            <Input
                    type="password"
                    password
                    :maxlength="maxlength"
                    v-model="currentValue"
                    @on-change="handleChange"
                    :size="size"
                    :placeholder="placeholder"
                    :disabled="disabled"
                    :readonly="readonly"
            />
            <div :class="tipStyle" slot="content">
                <div class="words">强度 : {{strength}}</div>
                <Progress
                        :percent="strengthValue"
                        :status="progressStatus"
                        hide-info
                        style="margin: 13px 0;"
                />
                <br/>请至少输入 6 个字符。请不要使
                <br/>用容易被猜到的密码。
            </div>
        </Poptip>
    </div>
</template>

<script>
    export default {
        name: "setPassword",
        props: {
            value: String,
            size: String,
            placeholder: {
                type: String,
                default: "请输入密码，长度为6-20个字符"
            },
            disabled: {
                type: Boolean,
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            },
            maxlength: {
                type: Number,
                default: 20
            }
        },
        data() {
            return {
                currentValue: this.value,
                tipStyle: "password-tip-none",
                strengthValue: 0,
                progressStatus: "normal",
                strength: "无",
                grade: 0
            };
        },
        methods: {
            checkStrengthValue(v) {
                // 评级制判断密码强度 最高5
                let grade = 0;
                if (/\d/.test(v)) {
                    grade++; //数字
                }
                if (/[a-z]/.test(v)) {
                    grade++; //小写
                }
                if (/[A-Z]/.test(v)) {
                    grade++; //大写
                }
                if (/\W/.test(v)) {
                    grade++; //特殊字符
                }
                if (v.length >= 10) {
                    grade++;
                }
                this.grade = grade;
                return grade;
            },
            strengthChange() {
                if (!this.currentValue) {
                    this.tipStyle = "password-tip-none";
                    this.strength = "无";
                    this.strengthValue = 0;
                    return;
                }
                let grade = this.checkStrengthValue(this.currentValue);
                if (grade <= 1) {
                    this.progressStatus = "wrong";
                    this.tipStyle = "password-tip-weak";
                    this.strength = "弱";
                    this.strengthValue = 33;
                } else if (grade >= 2 && grade <= 4) {
                    this.progressStatus = "normal";
                    this.tipStyle = "password-tip-middle";
                    this.strength = "中";
                    this.strengthValue = 66;
                } else {
                    this.progressStatus = "success";
                    this.tipStyle = "password-tip-strong";
                    this.strength = "强";
                    this.strengthValue = 100;
                }
            },
            handleChange(v) {
                this.strengthChange();
                this.$emit("input", this.currentValue);
                this.$emit("on-change", this.currentValue, this.grade, this.strength);
            },
            setCurrentValue(value) {
                if (value === this.currentValue) {
                    return;
                }
                this.currentValue = value;
                this.strengthChange();
                this.$emit("on-change", this.currentValue, this.grade, this.strength);
            }
        },
        watch: {
            value(val) {
                this.setCurrentValue(val);
            }
        }
    };
</script>

<style lang="less">
    .set-password .ivu-poptip,
    .set-password .ivu-poptip-rel {
        display: block;
    }

    .password-tip-none {
        padding: 1vh 0;
    }

    .password-tip-weak {
        padding: 1vh 0;

        .words {
            color: #ed3f14;
        }
    }

    .password-tip-middle {
        padding: 1vh 0;

        .words {
            color: #2d8cf0;
        }
    }

    .password-tip-strong {
        padding: 1vh 0;

        .words {
            color: #52c41a;
        }
    }
</style>

